import *  as A from "@app";
import { main } from '@model'
import { useEffect, useState } from "react";
import DataToBlockNoteView from "./component/DataToBlockNoteView";
import { useLocation } from "react-router-dom";
import { Spin } from "antd";
import { LoadingOutlined } from '@ant-design/icons';

const defaultNote = new main.Note({ content: '[{"type":"paragraph"}]' })

export default function MainPage() {
  const [note, setNote] = useState(defaultNote)
  const [loading, setLoading] = useState(true)

  const query = new URLSearchParams(useLocation().search);

  useEffect(() => {
    const noteId = query.get("id")
    if (noteId != null) {
      (async () => {
        await A.GetNote(Number(noteId)).then(n => {
          setNote(n)
          setLoading(false)
        })
      })()
    } else {
      setLoading(false)
    }
  }, [])

  if (loading) {
    return <>
      <Spin style={{ background: 'none' }} indicator={<LoadingOutlined spin />} size="large" fullscreen />
    </>
  }

  return <>
    <DataToBlockNoteView note={note} />
  </>;
}

